<template>
  <div ref="qrcodeHtmlRef" :id="id">
    <div style="width: 600px; height: 380px; margin: 1em auto">
      <div style="display: flex; align-items: center; justify-content: center">
        <span style="width: 1.5em">{{ qrCodeData.oneCompany || '-' }}</span>
        <QrCode :value="qrCodeData.waterMeterCodes" tag="img" />
        <span style="width: 1.5em">{{ qrCodeData.twoCompany || '-' }}</span>
      </div>
      <div style="display: flex; flex-wrap: wrap">
        <div
          style="
            width: 50%;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
          "
          v-for="(item, index) in modalInfoList"
          :key="index"
        >
          <div style="text-align: right; flex: 1">{{ item.title }}：</div>
          <div style="flex: 1.5">{{ item.value || '-' }}</div>
        </div>
      </div>
      <!-- <Row :gutter="[20, 12]" style="margin: auto">
            <Col :span="12" v-for="(item, index) in modalInfoList" :key="index">
              <Row>
                <Col :span="10" style="text-align: right">{{ item.title }}：</Col>
                <Col :span="14">{{ item.value || '-' }}</Col>
              </Row>
            </Col>
          </Row> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { QrCode } from '/@/components/Qrcode/index';
  import { CommonParam } from '../types';
  defineProps({
    qrCodeData: {
      type: Object,
      default: () => {},
    },
    modalInfoList: {
      type: Array as PropType<CommonParam[]>,
      default: () => [],
    },
    id: {
      type: String,
      default: 'print-0',
    },
  });

  const qrcodeHtmlRef = ref<HTMLDivElement | null>(null);

  const getHTMLContent = () => {
    return qrcodeHtmlRef.value?.innerHTML;
  };

  defineExpose({ getHTMLContent });
</script>

<style lang="less" scoped></style>
